<template>
    <div :class="['code-tool', { 'dark-mode': isDark }]">
        <!-- 工具头部（动态） -->
        <ToolHeader :title="title" :subtitle="subtitle"/>

        <!-- 工具主内容 -->
        <div class="tool-body">
            <el-form label-width="110px" class="form-container" size="default" :label-position="'left'">
                <!-- 源进制 -->
                <el-form-item label="源进制">
                    <el-select v-model="sourceBase" placeholder="选择源进制" class="select-base">
                        <el-option v-for="n in 35" :key="n" :label="n + 1" :value="n + 1"/>
                    </el-select>
                </el-form-item>

                <!-- 目标进制 -->
                <el-form-item label="目标进制">
                    <el-select v-model="targetBase" placeholder="选择目标进制" class="select-base">
                        <el-option v-for="n in 35" :key="n" :label="n + 1" :value="n + 1"/>
                    </el-select>
                </el-form-item>

                <!-- 输入内容 -->
                <el-form-item label="输入内容">
                    <el-input
                            v-model="inputValue"
                            placeholder="请输入内容"
                            clearable
                            class="input-field"
                    />
                </el-form-item>

                <!-- 输出内容 -->
                <el-form-item label="输出内容">
                    <el-input
                            v-model="outputValue"
                            placeholder="输出内容"
                            readonly
                            class="input-field output-field"
                    />
                </el-form-item>

                <!-- 复制按钮 -->
                <el-form-item>
                    <el-button
                            type="primary"
                            :disabled="!outputValue"
                            @click="copyOutput()"
                    >
                        <el-icon>
                            <DocumentCopy/>
                        </el-icon>
                        复制输出内容
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import {ref, onMounted, watch} from "vue";
import {get, post} from "@/net/index.js";
import ToolHeader from "@/components/ToolHeader.vue";
import {ElMessage} from "element-plus";
import {useDark} from "@vueuse/core";
import {DocumentCopy} from '@element-plus/icons-vue'

const isDark = useDark();

const title = ref("");
const subtitle = ref("");

const sourceBase = ref(10);
const targetBase = ref(2);
const inputValue = ref("");
const outputValue = ref("");

// 页面加载时获取工具信息
onMounted(() => {
    get(
        "/api/codeTool/getInfo?path=number_change",
        (data) => {
            title.value = data.title || data.name || "";
            subtitle.value = data.introduction || "";
        },
        (msg) => {
            ElMessage.error("获取工具信息失败：" + msg);
        }
    );
});

// 监听源进制、目标进制、输入内容变化，防抖触发转换请求
let timer = null;
watch([sourceBase, targetBase, inputValue], () => {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
        if (!inputValue.value.trim()) {
            outputValue.value = "";
            return;
        }
        // 调用后端转换接口
        post(
            "/api/codeTool/number-change",
            {
                sourceBase: sourceBase.value,
                targetBase: targetBase.value,
                inputValue: inputValue.value,
            },
            (data) => {
                outputValue.value = data || "";
            },
            (msg) => {
                console.error("后端错误详细信息:", msg);
                ElMessage.error("进制转换失败，请检查输入内容和进制范围");
                outputValue.value = "";
            }
        );
    }, 300);
});

function copyOutput() {
    if (!outputValue.value) {
        ElMessage.warning("没有内容可复制");
        return;
    }
    navigator.clipboard.writeText(outputValue.value).then(() => {
        ElMessage.success("已复制到剪贴板");
    }).catch(() => {
        ElMessage.error("复制失败，请手动复制");
    });
}
</script>

<style scoped>
/* 浅色模式背景由父容器提供，保持透明 */
.code-tool {
    background: transparent;
    min-height: calc(100vh - 7.5rem);
}

/* 深色模式时卡片与文字颜色 */
.dark-mode .form-container {
    background: #2a2e3d;
    border-color: #44495a;
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.4);
    color: #e0e6f3;
}

/* 工具主区域背景样式 */
.tool-body {
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: auto;
    box-sizing: border-box;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* 表单容器卡片样式 */
.form-container {
    max-width: 40rem;
    width: 100%;
    background: #ffffff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.form-container:hover {
    box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.08);
    transform: translateY(-0.125rem);
}

/* el-form-item 标签字体样式 */
:deep(.el-form-item__label) {
    font-weight: 600;
    font-size: 1rem;
    color: #374151;
    font-family: "Inter", sans-serif;
    padding-right: 0.75rem;
}

.dark-mode :deep(.el-form-item__label) {
    color: #d1d5db;
}

/* 选择器宽度 */
.select-base {
    width: 100%;
    border-radius: 0.5rem;
}

/* 输入框统一样式 */
:deep(.el-input__wrapper) {
    height: 2.75rem;
    font-size: 1rem;
    border-radius: 0.5rem;
    padding: 0 0.75rem;
    border: 1px solid #d1d5db;
    background-color: #fff;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    color: #1f2937;
    transition: border-color 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}

.dark-mode :deep(.el-input__wrapper) {
    background-color: #3b4252;
    color: #e0e6f3;
    border-color: #565f7a;
}

/* 输入框聚焦样式 */
:deep(.el-input__wrapper.is-focus) {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.125rem rgba(59, 130, 246, 0.2);
}

/* 只读状态下的输出框样式 */
.output-field :deep(.el-input__wrapper) {
    background-color: #f3f4f6;
    color: #6b7280;
    font-weight: 500;
    border-color: #d1d5db;
    cursor: default;
}

.dark-mode .output-field :deep(.el-input__wrapper) {
    background-color: #464c66;
    color: #9aa5c1;
    border-color: #565f7a;
    cursor: default;
}

/* 按钮图标和文字间距 */
:deep(.el-button .el-icon) {
    margin-right: 0.4rem;
}

/* 响应式布局 */
@media (max-width: 40rem) {
    .tool-body {
        padding: 1rem 0.75rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .form-container {
        padding: 1.25rem;
        border-radius: 0.75rem;
    }
}

</style>
